<!-- src/components/GlobalTopBar.vue -->
<template>
  <!-- 顶部组件容器：固定在顶部，高度由计算得出 -->
  <view class="global-top-bar" :style="{ height: topTotalDistance + 'px' }">
    <!-- 导航栏内容区：支持插槽自定义标题/返回键 -->
    <view class="nav-content" :style="{ paddingTop: statusBarHeight + 'px' }">
      <!-- 左侧插槽：添加 left-slot 类 -->
      <view class="left-slot">
        <slot name="left" v-if="isFist && props.isLeft"
          ><uni-icons
            type="left"
            size="26"
            :color="props.color || '#333'"
            @click="
              uni.navigateBack({
                delta: 1,
              })
            "
          ></uni-icons
        ></slot>
      </view>
      <!-- 中间标题：添加 title-slot 类 -->
      <view class="title-slot">
        <slot name="title"></slot>
      </view>
      <!-- 右侧插槽：添加 right-slot 类 -->
      <view class="right-slot">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
  <loadings />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import loadings from './loading.vue';

const props = defineProps({
  isLeft: Boolean,
  color: String,
});
// 1. 定义响应式状态：顶部总高度、状态栏高度
const topTotalDistance = ref(0); // 状态栏 + 导航栏 总高度
const statusBarHeight = ref(0); // 状态栏高度（适配刘海屏/全面屏）

// 2. 计算顶部高度的核心方法
// 计算顶部高度的核心方法（使用getWindowInfo）
const calcTopDistance = () => {
  // 获取窗口信息（包含状态栏高度等关键数据）
  const windowInfo = uni.getWindowInfo();
  statusBarHeight.value = windowInfo.statusBarHeight || 20; // 状态栏高度

  // 获取右上角胶囊按钮位置
  const menuButton = uni.getMenuButtonBoundingClientRect();

  if (menuButton) {
    // 计算导航栏高度：胶囊高度 + 上下留白*2
    const navBarHeight =
      menuButton.height + (menuButton.top - statusBarHeight.value) * 2;
    // 顶部总高度 = 状态栏高度 + 导航栏高度
    topTotalDistance.value = statusBarHeight.value + navBarHeight;
  } else {
    // 降级处理：默认导航栏高度44px
    console.warn('获取胶囊按钮位置失败，使用默认值');
    topTotalDistance.value = statusBarHeight.value + 44;
  }
};

const isFist = ref(true);

const checkHasPrevPage = () => {
  // 获取当前页面栈数组
  const pages = getCurrentPages();
  // 判断页面栈长度
  if (pages.length >= 2) {
    isFist.value = true;
  } else {
    isFist.value = false;
  }
};

// 3. 生命周期：组件挂载时计算高度，监听窗口变化（如旋转屏幕）
onMounted(() => {
  calcTopDistance();
  // 监听窗口尺寸变化，重新计算高度（适配横竖屏切换）
  uni.onWindowResize(calcTopDistance);
  checkHasPrevPage();
});

// 4. 生命周期：组件销毁时移除监听，避免内存泄漏
onUnmounted(() => {
  uni.offWindowResize(calcTopDistance);
});

// 5. 对外暴露状态：让父组件能获取顶部总高度
defineExpose({
  topTotalDistance, // 暴露顶部总高度，供页面计算内容偏移
});
</script>

<style scoped lang="scss">
.global-top-bar {
  position: relative;
}
.nav-content {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 20rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #333;

  // 左侧插槽：左对齐
  .left-slot {
    margin-right: auto; /* 关键：通过 margin 推到左侧 */
    // 可添加左侧内容的额外样式（如按钮大小）
    width: 100rpx;
    text-align: left;
  }

  // 标题插槽：居中（flex 容器中自动居中）
  .title-slot {
    white-space: nowrap; // 防止标题换行
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // 右侧插槽：右对齐
  .right-slot {
    margin-left: auto; /* 关键：通过 margin 推到右侧 */
    // 可添加右侧内容的额外样式
    width: 100rpx;
    text-align: right;
  }
}
</style>
